<template>
    <div class="app-container">
        <!-- 查询条件表单 -->
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
            <el-form-item label="用户名" prop="account">
                <el-input v-model="queryParams.account" placeholder="请输入用户名" clearable style="width: 240px"
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="queryParams.email" placeholder="请输入邮箱" clearable style="width: 240px"
                    @keyup.enter.native="handleQuery" />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
            <el-row>
                <el-form-item label="显示已停用" prop="isShowDeleted">
                    <el-switch v-model="isShowDeleted" active-color="#13ce66" inactive-color="#888888">
                    </el-switch>
                </el-form-item>
            </el-row>
        </el-form>

        <!-- 表格上方工具栏 -->
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAddReceiver"
                    v-hasPermi="['fileshare:supplierconfig:add']">新增</el-button>
            </el-col>
        </el-row>

        <!-- 表格 -->
        <el-table v-loading="loading" :data="showList" @selection-change="handleSelectionChange" height="500"
            style="width: 100%;" ref="table">
            <el-table-column type="selection" width="80"/>
            <el-table-column type="index" label="序号" width="80"/>
            <el-table-column label="供应商编号" prop="account" />
            <el-table-column label="供应商简称" prop="alias" />
            <el-table-column label="电子邮箱" prop="email" />
            <el-table-column label="所属组织" prop="group" />
            <el-table-column label="绑定系统用户" prop="sysUserName" />
            <el-table-column label="负责业务员" prop="chargeUserName" />
            <el-table-column label="账号状态" prop="isDeleted">
                <template slot-scope="scope">
                    <el-tag :type="scope.row.isDeleted ? 'danger' : 'success'">
                        {{ scope.row.isDeleted ? '停用' : '正常' }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="260">
                <template slot-scope="scope">
                    <el-button size="small" plain type="success" icon="el-icon-edit" @click="handleRowEdit(scope.row)"
                        v-hasPermi="['fileshare:supplierconfig:edit']" style="padding: 5px;">编辑</el-button>
                    <el-button size="small" plain type="danger" icon="el-icon-delete"
                        @click="handleRowDelete(scope.row)" v-hasPermi="['fileshare:supplierconfig:delete']"
                        style="padding: 5px;">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.limit"
            @pagination="getSupplierList" />
        <addtion-mail-user-dialog v-if="addtionMailUserDialogVisible" :data="currentSupplier"
            :dialogVisible="addtionMailUserDialogVisible"
            @close="onAddtionMailUserDialogClose"></addtion-mail-user-dialog>
    </div>
</template>

<script>
import request from '@/utils/request'
import addtionMailUserDialog from './components/addtionMailUserDialog.vue'

export default {
    name: "supplierConfig"
    , components: {
        addtionMailUserDialog
    }
    , data() {
        return {
            queryParams: {
                page: 1
                , limit: 10
                , account: ''
                , email:''
            }
            , isShowDeleted: false
            , total: 0
            , showSearch: true
            , loading: false
            , tableData: []
            , selects: []
            , addtionMailUserDialogVisible:false
            , viewDetailDialogVisible:false
            ,currentSupplier:{}
            ,allList:[]
            ,showList:[]
        }
    }
    , methods: {
        getSupplierList() {
            this.loading = true;
            request({
                url: '/file-share/receiver/list'
                , method: 'get'
                , params: this.queryParams
            }).then(res => {
                if (res.code === 200) {
                    this.allList = res.data.list;
                    this.showList = [];
                    this.showList = this.allList.filter(item => {
                        item.sysUserName = `${item.sysUserName} (${item.sysUserNick})`;
                        if(this.isShowDeleted){
                            return true;
                        }else{
                            return item.isDeleted === false;
                        }
                    });
                    this.total = res.data.total
                } else {
                    this.$message.error(res.msg)
                }
                this.loading = false;
            })
                .catch(err => {
                    console.log(err)
                    this.$modal.msgError(err)
                    this.loading = false;
                })
        }
        , init() {
            window.addEventListener('resize', this.handleResize);
            this.getSupplierList();
            this.supplierDataEnsure();
        }
        , handleResize() {
            this.$nextTick(() => {
                this.$refs.table.doLayout();
            });
        }
        , handleQuery() {
            this.getSupplierList();
        }
        , resetQuery() {
            this.queryParams = {
                page: 1
                , limit: 10
                ,account:''
                ,email:''
            }
            this.getSupplierList();
        }
        , handleSelectionChange(selects) {
        }
        , handleRowEdit(row) {
            // console.log(row.id);
            this.currentSupplier = row;
            this.addtionMailUserDialogVisible = true;
        }
        , handleRowDelete(row) {
            this.$modal.confirm('是否确认停用供应商"' + row.account+'？').then(function () {
                return request({
                    url: '/file-share/receiver/delete/' + row.id
                    , method: 'delete'
                })
            }).then((res) => {
                if (res && res.code === 200) {
                    this.getSupplierList();
                    this.$modal.msgSuccess("停用成功。");
                } else {
                    this.$modal.msgError(res.msg);
                }
            }).catch((e) => {
                console.log(e);
            });
        }
        , handleAddReceiver(){
            this.addtionMailUserDialogVisible = true;
        }
        , onAddtionMailUserDialogClose(shouldRefresh){
            this.currentSupplier = {};
            if(shouldRefresh)
                this.getSupplierList();
            this.addtionMailUserDialogVisible = false;
        }
        ,supplierDataEnsure() {
            var listStr = localStorage.getItem('supplier-list');
            if (!listStr || listStr.length === 0) {
               this.getAllSupplierByService();
            }
        }
        , getAllSupplierByService() {
            this.loading = true;
            request({
                url: '/file-share/receiver/select-list'
                , method: 'get'
            }).then(res => {
                if (res.code === 200) {
                    localStorage.setItem('supplier-list', JSON.stringify(res.data));
                } else {
                    this.$message.error(res.msg)
                }
            })
                .catch(err => {
                    console.log(err)
                    this.$modal.msgError(err)
                })
                .finally(() => {
                    this.loading = false;
                })
        }

    }
    , mounted() {
        this.init();
    }
    ,watch: {
        isShowDeleted(val) {
            this.showList = this.allList.filter(item => {
                if (val) {
                    return true;
                } else {
                    return item.isDeleted === false;
                }
            });
        }
    }
}

</script>

<style scoped></style>